/*
* 资产盘点计划
* */
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {withRouter} from "react-router-dom";
import {ListViewPage} from "weaver-mobile-page";
import {Tabs, SearchBar, Tools, Modal, Toast} from "weaver-mobile";

const getLabel = Tools.getLabel;

const tabs = [
    {
        title: getLabel(389838, "待盘点表"),
        index: 0
    },
    {
        title: getLabel(389839, "已盘点表"),
        index: 1
    }
]

@inject("inventoryStore")
@withRouter
@observer
export default class Inventory extends Component {
    componentWillMount() {
        const {inventoryStore} = this.props;
        inventoryStore.init();
    }

    getRowProps = (rowData) => {
        /**
         * ！！！警告 ！！！
         * 这个方法自由度非常大，操作不好可能会影响渲染的正确性，请谨慎使用。
         *
         * 例如：
         * 1、数据的 disabled 属性将直接影响行选中的处理结果
         * 2、另外 checked 是否禁用一部分逻辑是通过接口控制的
         * 3、这里拥有最高优先级，可以覆盖任何的属性，可能导致列表默认操作逻辑错误。
         */        if (rowData.planliststate === "3") {
            rowData.disabled = true;
            return {
                showCheck: false,
                disabled: true,
                withSwipeAction: true,
            };
        }
    };

    render() {
        const {inventoryStore, history} = this.props;
        const {
            searchValue, searchValue2, needInventoryList, inventoriedList,  nowTab,
        } = inventoryStore;
        const {onSearch, changeSearchValue, onTabChange, scanInfo, submitInfo} = inventoryStore;
        return (
            <div>
                <Tabs tabs={tabs}
                      initialPage={0}
                      swipeable={false}  //是否可以滑动内容切换
                      useOnPan={false}   //	使用跟手滚动
                      animated={true}   //是否开启切换动画
                      page={nowTab}
                      prerenderingSiblingsNumber={0}    //去除预加载造成的重复
                      onChange={(tab) => {
                          onTabChange(tab.index)
                      }}
                />
                <SearchBar
                    className="search-select"
                    placeholder="Search"
                    showExtraButton
                    value={nowTab === 0 ? searchValue : searchValue2}
                    onChange={(val) => changeSearchValue(val)}
                    onSubmit={onSearch}
                    onClear={() => {
                        changeSearchValue();
                        onSearch();
                    }}
                    extraButton={[
                        {
                            key: "scan",
                            show: <i className='cpt-tool-scan icon-cpt icon-tubiao38'
                                     onClick={(e) => scanInfo(e, history)}/>
                        },
                    ]}
                />

                <ListViewPage.Normal
                    rowKey="id"
                    store={nowTab === 0 ? needInventoryList : inventoriedList}
                    heightSpace={
                        window.getThemeVars ?
                            window.getThemeVars()["tabs-height"] 
                            : 47
                    }
                    useBodyScroll={false}
                    getRowProps={this.getRowProps}
                    withSwipeAction={false}
                    swipeActionProps={nowTab === 0 ? {
                        autoClose: true,
                        right: [
                            {
                                text: getLabel(725, "提交"),
                                style: {backgroundColor: "#4caf50", color: "#fff", padding: "0 8px"},
                                onPress: (data) => {
                                    if (data.planliststate !== "3") {
                                        Toast.fail("仅能提交状态为待提交的盘点表", 2);
                                        return;
                                    }
                                    Modal.alert(getLabel(390013, "盘点提交"), getLabel(390014, "确定提交该盘点表吗？"), [
                                        {
                                            text: getLabel(31129, "取消"), onPress: () => {
                                            }
                                        },
                                        {text: getLabel(826, "确定"), onPress: () => submitInfo(data.id)}])
                                },
                            }]
                    } : {}}
                    onRowClick={(item) => {
                        let from = "";
                        if (nowTab === 0) {
                            from = "needInventory/"
                        } else {
                            from = "inventoried/"
                        }
                        history.push("/inventoryDetail/" + from + item.id + "?newPage=1")
                    }}
                />
            </div>
        );
    }
}
